import React, {Component} from 'react';
import app from '../app';
import {Form, Input, Layout, Button} from 'antd';
import {admin} from '../value';
import {config} from "../config";
import tt from '../image/tt.jpg';
import logo from '../image/logo1.png';
import phones from '../image/photo.png';
import '../css/login.css';
import md5 from 'MD5';

const FormItem = Form.Item;

// 登陆界面
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
        };
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Layout style={{background: '#fff', height: '100%', textAlign: 'center'}}>
                {/*<Header style={{background: '#fff'}}/>*/}
                <div className="header">
                    <div className="area">
                        {/*<a href="" target="_blank"><img className="logo" src={tt}/></a>*/}
                        {/*<div className="greeting">欢迎登录</div>*/}
                        <div className="menu">
                            技术支持：佛山市领蓝信息科技有限公司&nbsp;&nbsp;
                            电话：13726904657（微信同号）&nbsp;&nbsp;
                        </div>
                    </div>
                </div>
                <div className="contents">
                    <div className="bg"></div>
                    <div className="area">
                        {/*<div className="phones_img">*/}
                            {/*<img src={phones}/>*/}
                        {/*</div>*/}
                        <div className="loginbox">
                            <h1>领蓝信息科技</h1>
                            <Form>
                                <div className="item userName">
                                    <label></label>
                                    <FormItem>
                                        {getFieldDecorator('admin_username', {
                                            rules: [{required: true, message: '请输入账号!'}],
                                        })(
                                            <Input onKeyDown={(e) => {
                                                this.handleKeyDown(e)
                                            }} id="txt_userName" className="empty" type="text" placeholder="输入管理员账号"/>
                                        )}
                                    </FormItem>
                                </div>
                                <div className="item passWord">
                                    <label></label>
                                    <FormItem>
                                        {getFieldDecorator('admin_password', {
                                            rules: [{required: true, message: '请输入密码!'}],
                                        })(
                                            <Input onKeyDown={(e) => {
                                                this.handleKeyDown(e)
                                            }} id="txt_password" type="password" className="empty" placeholder="请输入密码"/>
                                        )}
                                    </FormItem>
                                </div>

                                <Button
                                    loading={this.state.loading}
                                    onClick={(e) => this.handleSubmit(e)} id="longinSubmit" className="submit">登
                                    录</Button>
                                <div className="forget"><a onClick={(e) => this.handleForgetPass(e)}
                                                           href="/ForgetPassword" target="_self">忘记密码？</a></div>
                            </Form>
                        </div>
                    </div>
                </div>

                <div className="bottom">
                    <div className="area info">
                        <span>© Copyright.  领蓝科技有限公司 - All Rights Reserved.
                                <a style={{marginLeft: '30px'}} href="http://www.miitbeian.gov.cn">粤ICP备17134571号</a>
                                </span>
                    </div>
                </div>
            </Layout>
        )
    }

    componentDidMount() {
        //app.setToken('123');
    }

    handleKeyDown(e) {
        if (e.keyCode == '13') {
            this.handleSubmit(e)
        }
    }

    //登录账号
    handleSubmit = (e) => {
        e.preventDefault();
        let that = this;
        that.props.form.validateFields((err, values) => {
            if (!err) {
                values.admin_password = md5(values.admin_password);
                this.setState({loading: true});
                app.post(admin.LOGIN, values).then(req => {
                    that.setState({loading: false});
                    if (req.code == 1) {
                        let data = req.data;
                        app.setToken(data.token);
                        app.setData('username',data.admin_username);
                        that.props.history.push(config.path + '/home/successfulCases');
                        window.location.reload();
                    } else if (req.code == 2) {
                        app.alert(req.msg, 'error', '3');
                    }
                })
            }
        });
    };

    handleForgetPass(e) {
        e.preventDefault();
        this.props.history.push(config.path + "/forgetPassword");
    }
}

const WrappedNormalLoginForm = Form.create()(Login);
export default WrappedNormalLoginForm;